<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级菜单</title>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">一</span>
				<a href="#">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">二</span>
				<a href="#">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var menuSpan =document.getElementsByClassName("menuSpan")
	var opendiv = menuSpan[0].parentNode
	for(var i = 0;i<menuSpan.length;i++){
		menuSpan[i].onclick = function(){
			var parentdiv = this.parentNode
			togglemenu(parentdiv);
			if(opendiv != parentdiv && !hasClass(opendiv,"collasped")){
				togglemenu(opendiv)
			}
			opendiv = parentdiv
		};
	}
	function togglemenu(obj){
		var begin = obj.offsetHeight;
		toggleClass(obj,"collapsed")
		var end = obj.offsetHeight
		obj.style.height = begin + "px"
		move(obj,"height",end,5,function(){
			obj.style.height = null
		});
	}
	document.write('<link rel="stylesheet" href="二级菜单.css">');
</script>
<script src="tools.js" type="text/javascript" charset="utf-8"></script>
